<template>
	<view class="flex align-center search">
		<view class="margin-right-sm">
			<slot>
				<text :class="[icon?icon:'cuIcon-search']"></text>
			</slot>
		</view>
		<input 
			:type="type" 
			v-model="searchText"
			:placeholder="holder?holder:'请输入岗位名称进行搜索'"
			@confirm="handleEmit"
			@blur="handleEmit"
		/>
	</view>
</template>

<script lang="ts" setup>
import { ref, type Ref } from 'vue'

withDefaults(
	defineProps<{
		icon?:string
		holder?:string
		type?:string
	}>(),
	{
		type:'text'
	}
)	

const model = defineModel<string>()  //获取组件的v-model数据
const searchText:Ref<string> = ref(model.value?model.value:'')
const handleEmit = ()=>{
	model.value = searchText.value 
}
</script>

<style lang="scss">
.search{
	padding: 30upx;
	border: 1upx solid #eee;
	border-radius: 6upx;
	input{
		flex:1
	}
}
</style>